<template>
	<view class="container">
		<u-subsection :list="resourcesTypeMap" keyName="name" :current="currentIndex"
			@change="switchResourcesType"></u-subsection>

		<textarea v-if="currentIndex == 0" v-model="text" placeholder="请输入文本" class="input" maxlength="2048" auto-height
			rows="40"></textarea>
			
		<uni-file-picker v-if="currentIndex == 1" ref="picker" class="picker" mode="grid" file-mediatype="image" :limit="9" :sizeType="['compressed']" :auto-upload="false"
			@select="selectImg" @delete="delImg" />

		<view class="footer">
			<u-button type="primary" text="确认上传" :disabled="!canSumbit" @click="sumbit"></u-button>
		</view>
	</view>
</template>

<script>
	import resourcesApi from '@/api/resources.js'
	import {
		HTTP_REQUEST_URL
	} from '@/config/app'
	export default {
		data() {
			return {
				resourcesTypeMap: [{
					key: 'text',
					name: '文本'
				}, {
					key: 'image',
					name: '图片'
				}],
				currentIndex: 1,
				text: '',
				img: []
			}
		},
		computed: {
			canSumbit() {
				return (this.currentIndex == 0 && this.text) || (this.currentIndex == 1 && this.img.length)
			}
		},
		methods: {
			switchResourcesType(index) {
				this.currentIndex = index
			},
			selectImg(e) {
				for (const i in e.tempFilePaths) {
					this.img.push(e.tempFilePaths[i])
				}
			},
			delImg(e) {
				this.img.splice(e.index, 1)
			},
			sumbit() {
				uni.showLoading({
					title: '上传中...'
				})
				if (this.currentIndex == 0) {
					resourcesApi.add({
						type: 'text',
						content: this.text
					}).then(res => {
						this.text = ''
						uni.hideLoading()
						uni.showToast({
							title: '上传成功',
							duration: 2000
						})
					})
				} else {
					const files = []
					for (const i in this.img) {
						files.push({
							name: 'img[' + i + ']',
							uri: this.img[i]
						})
					}
					uni.uploadFile({
						url: HTTP_REQUEST_URL + '/api/resources/add',
						files: files,
						formData: {
							'type': 'image'
						},
						success: res => {
							uni.hideLoading()
							if (res.statusCode !== 200) {
								uni.showToast({
									icon: 'error',
									title: '上传错误,请稍后再试!',
									duration: 2000
								})
								return
							}
							const data = JSON.parse(res.data)
							if (data.code !== 200) {
								uni.showToast({
									icon: 'error',
									title: data.msg,
									duration: 2000
								})
								return
							}
							this.img = []
							this.$refs.picker.clearFiles()
							uni.showToast({
								title: '上传成功',
								duration: 2000
							})
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.container {
		height: 100vh;
		padding: 0 10rpx;

		.input {
			font-size: 24rpx;
			resize: none;
			color: #404040;
			caret-color: #404040;
			background-color: #F2F2F2;
			line-height: 32rpx;
			word-break: break-word;
			white-space: pre-wrap;
			border: none;
			width: 100%;
			margin: 0;
			padding: 0;
			display: block;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			overflow: auto;
			min-height: 520rpx;
			margin-top: 12rpx;
		}

		.picker {
			margin-top: 12rpx;
		}

		.footer {
			width: calc(100% - 20rpx);
			position: absolute;
			bottom: 30rpx;
		}
	}
</style>